<template>
	<ul class="list" >
		<li class="item" 
		    v-for="item of letters" 
		    :ref="item"
		    @click="handleLetterClick"
			@touchstart="handleTouchStart"
			@touchmove="handleTouchMove"
			@touchend="handleTouchEnd"
		 >{{item}}</li>
	</ul>
</template>

<script>
	export default {
		name:'CityAlphabet',
		props:{
			cities:Object,
		},
		computed:{
			letters(){
				const letters = [];
				for (let i in this.cities) {
					letters.push(i);
				}
				return letters;
			}
		},
		data:function(){
			return{
				status:false,
				stratY:0,
				timer:null
			}
		},
		updated(){
			this.startY = this.$refs['A'][0].offsetTop
		},
		methods:{
			handleLetterClick (e) {
				this.$emit('change',e.target.innerText);
			},
			handleTouchStart(){
				this.status=true;
			},
			handleTouchMove(e){
				if(this.status){
					if(this.timer){
						clearTimeout(this.timer);
					}
					this.timer=setTimeout(()=>{const moveY =  e.touches[0].clientY-78.5; 
					const index = Math.floor((moveY - this.startY)/22);
					if(index >= 0 && index < this.letters.length	){
						this.$emit('change',this.letters[index]);
					}},15);		
				}
			},
			handleTouchEnd(){
				this.status=false;
			}

		}
	}
</script>

<style scoped>
	.list{
		display: flex;
		flex-direction: column;
		justify-content: center;
		top: 1.58rem;
		position: absolute;
		right: 0;
		bottom: 0;
		
	}
	.item{
		color:  #00bcd4;
		padding: .1rem;
		font-size: .2rem;
	}
</style>